<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async</title>
</head>

<body>
  <script>
    // 异步的终极解决方案 ；
    //ES8： async await 终极解决方案；基于promise
    // 通过同步的形式改写异步代码 ；
    let fn1 = function () {
      return new Promise((res) => {
        setTimeout(() => {
          res(111)
        }, 1000);
      })
    }

    let fn2 = function () {
      return new Promise((res) => {
        setTimeout(() => {
          res(222)
        }, 1000);
      })
    }

    let fn3 = function () {
      return new Promise((res) => {
        setTimeout(() => {
          res(333)
        }, 1000);
      })
    }


    // // 这样是同时执行
    // fn1().then((res)=>{
    //   console.log(res)
    // })
    // fn2().then((res)=>{
    //   console.log(res)
    // })
    // fn3().then((res)=>{
    //   console.log(res)
    // })


    // // 依次调用，promise链式调用
    // fn1().then(res=>{
    //   console.log(res)
    //   return fn2()
    // }).then(res =>{
    //   console.log(res)
    //   return fn3()
    // }).then(res =>{
    //   console.log(res)
    // })

    // 调用形式上 ES8 async 及await 用的更多；
    // 异步代码改写成了 同步的写法；
    // 1.async 和await 要成对出现；
    // 2.await的标志 就是promise对象调用 reslove 或者reject
    // 3.await只能等待一个async函数里的结果；
    // async function fn1(){
    // 	await fun2();
    // }

    // async await 实现依次调用
    // async function fn () {
    //   let res1 = await fn1()
    //   console.log(res1)
    //   let res2 = await fn2()
    //   console.log(res2)
    //   let res3 = await fn3()
    //   console.log(res3)
    // }

    async function fn() {
      try {
        let res1 = await fn1()
        console.log(res1)
        let res2 = await fn2()
        console.log(res2)
        let res3 = await fn3()
        console.log(res3)
      }
      catch (err) {
        console.log(err)
      }
    }


    fn()
  </script>
</body>

</html>